---
sidebar_position: 3
---

import BrowserWindow from '@theme/BrowserWindow';
import SideEditorButton from '@theme/SideEditorButton';

# 📦 theme-side-editor

A Docusaurus theme component that loads a code editor in a split pane.

## Usage

Read the [Side Editor documentation](/docs/markdown-features/side-editor).

You can also inject the button using MDX. Add the global import at the start of the `.mdx` file.

```jsx
import SideEditorButton from '@theme/SideEditorButton';
```

Then use the `SideEditorButton` element in your page.

```jsx
<SideEditorButton editorId="devicescript" text={`console.log("hello")`} />
```

<BrowserWindow>
  <SideEditorButton editorId="devicescript" text={`console.log("hello")`} />
</BrowserWindow>

## Configuration

Install the theme

```bash npm2yarn
npm install @rise4fun/docusaurus-theme-side-editor
```

Add the theme to your theme list.

```js
const config = {
  plugins: [
    // highlight-start
    ['@rise4fun/docusaurus-theme-side-editor', {}],
    // highlight-end
  ],
};
```
